<!--

    Copyright (c) 2015 Red Hat, Inc.
    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v1.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v10.html

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-popup title="Add user" on-close="adminsAddUserController.abort()">
  <ng-form name="createUserForm" class="admins-add-user-form" layout="column" align="center center">
    <div class="form-input-fields">
      <che-input-box che-form="createUserForm"
                 che-name="login"
                 che-label-name="User Login"
                 che-place-holder="login"
                 ng-model="adminsAddUserController.newUserName"
                 required
                 focusable
                 ng-maxlength="100">
        <div ng-message="maxlength">User login to be less than 100 characters long.</div>
      </che-input-box>
      <che-input-box che-form="createUserForm"
                 che-name="email"
                 che-label-name="User Email"
                 che-place-holder="e-mail"
                 ng-maxlength="100"
                 type="email"
                 required
                 ng-model="adminsAddUserController.newUserEmail">
        <div ng-message="email">Enter a valid email address.</div>
        <div ng-message="maxlength">User email has to be less than 100 characters long</div>
      </che-input-box>
      <div layout="row" layout-align="start start" ng-if="adminsAddUserController.organizations.length > 0">
        <label>Organization:</label>
        <che-filter-selector che-values="adminsAddUserController.organizations"
                             che-width="400px"
                             ng-model="adminsAddUserController.organization"></che-filter-selector>
      </div>

      <che-input-box che-form="createUserForm"
                 che-name="password"
                 che-label-name="User Password"
                 che-place-holder="password"
                 che-pattern="^(?=.*[0-9]+.*)(?=.*[a-zA-Z]+.*).{0,}$"
                 ng-maxlength="100"
                 ng-minlength="8"
                 type="password"
                 required
                 ng-model="adminsAddUserController.newUserPassword">
        <div ng-message="pattern">User password should contain both letters and digits</div>
        <div ng-message="minlength">User password should contain at least 8 characters.</div>
        <div ng-message="maxlength">User password has to be less than 100 characters long.</div>
      </che-input-box>
      <div class="password-prompt"
           layout-xs="column" layout-sm="column" layout-md="column"
           layout-gt-md="row" flex="100">
        <div flex="50" flex-gt-md="25" class="password-prompt-text">
          <span>Minimum 8 characters, both letters and digits.</span>
        </div>
        <div flex="50" flex-gt-md="50" layout="column" layout-align="center center">
          <div class="pass-strength" ng-password-strength="adminsAddUserController.newUserPassword"
               strength="passStrength" inner-class="password-meter" class="ng-isolate-scope"></div>
        </div>
      </div>
      <che-input-box che-form="createUserForm"
                 che-name="confirmPassword"
                 che-label-name="Confirm Password"
                 che-place-holder="confirm password"
                 ng-model="confirmNewUserPassword"
                 ng-maxlength="100"
                 type="password"
                 required>
        <div ng-message="maxlength">Confirm password has to be less than 100 characters long.</div>
        <div
          ng-show="confirmNewUserPassword && (confirmNewUserPassword !== adminsAddUserController.newUserPassword)">
          Passwords do not match.
        </div>
      </che-input-box>

    </div>
    <div layout="row" layout-align="end center">
      <che-button-notice che-button-title="Cancel"
                         ng-click="adminsAddUserController.abort()">
      </che-button-notice>
      <che-button-primary che-button-title="Create"
                          ng-click="adminsAddUserController.createUser()"
                          ng-disabled="createUserForm.$invalid || confirmNewUserPassword !== adminsAddUserController.newUserPassword">
      </che-button-primary>
    </div>
  </ng-form>
</che-popup>
